<template>
    <div>
        {{ msg }}
        <button @click="msg = '张三'">点我改 msg</button>
        <p v-for="item in list" :key="item">{{ item }}</p>
        <button @click="list.push(4)">点我添加数据</button>
        <button @click="list[0] = '张三'">点我改索引0的数据</button>
    </div>
</template>

<script setup>

import { reactive, ref } from 'vue'

// setup 函数只会在组件初始化的时候执行一次
// setup 函数在beforeCreate生命周期钩子执行之前执行，实例还没生成，没有this
const list = reactive([1, 2, 3])
const msg = ref('消息')

</script>

<style lang="scss" scoped>
</style>
